<template>
  <div>
    <button
      type="button"
      :class="[
        'btn-default',
        type === 'primary'
          ? 'primary'
          : type === 'info'
          ? 'info'
          : type === 'success'
          ? 'success'
          : type === 'warning'
          ? 'warning'
          : type === 'error'
          ? 'error'
          : '',
        animation === 'raise'
          ? 'raise'
          : animation === 'fill'
          ? 'fill'
          : animation === 'pulse'
          ? 'pulse'
          : animation === 'close'
          ? 'close'
          : animation === 'slide'
          ? 'slide'
          : animation === 'offset'
          ? 'offset'
          : animation === 'shake'
          ? 'shake'
          : '',
      ]"
    >
      <span>
        <slot></slot>
      </span>
    </button>
  </div>
</template>

<script>
export default {
  name: "Button",
  props: {
    type: {
      //按钮颜色样式
      default: "default",
      type: String,
    },
    animation: {
      // default: "raise",
      type: String,
    },
  
  },
  created() {
    // console.log(this)
  },
};
</script>
<style lang="scss" scoped>
  $hover: "#ed4014";
  $color: "#f5f5f5";

  .slide:hover,
  .slide:focus {
    box-shadow: inset 6.5em 0 0 0 $hover;
  }

  // Multiple shadows, one on the outside, another on the inside
  .offset {
    box-shadow: 0.3em 0.3em 0 0 $color, inset 0.3em 0.3em 0 0 $color;

    &:hover,
    &:focus {
      box-shadow: 0 0 0 0 $hover, inset 6em 3.5em 0 0 $color;
    }
  }

  .up:hover,
  .up:focus {
    box-shadow: inset 0 -3.25em 0 0 $hover;
  }

  .close:hover,
  .close:focus {
    box-shadow: inset -3.5em 0 0 0 $hover, inset 3.5em 0 0 0 $hover;
  }

  .fill:hover,
  .fill:focus {
    box-shadow: inset 0 0 0 2em $hover;
  }

  .shake:hover,
  .shake:focus {
    transform: translateX(5px, 5px);
  }

  // 放大动画样式
  .pulse:hover,
  .pulse:focus {
    // animation: pulse 1s;
    box-shadow: 0 0 0 2em rgba(#fff, 0);
  }

  /**
  默认的动画样式
   */
    .raise:focus,
    .raise:hover {
      box-shadow: 0 0.5em 0.5em -0.4em $hover;
      transform: translateY(-0.25em);
    }

  //error颜色样式
  .error {
    background-color: #ed4014;
  }
  //warning颜色样式
  .warning {
    background-color: #f90;
  }

  //Success颜色样式
  .success {
    background-color: #19be6b;
  }

  //info颜色样式
  .info {
    background-color: #2db7f5;
  }

  //parimary颜色样式
  .primary {
    background: #2d8cf0;
  }

  // 默认按钮样式
  .btn-default {
    height: 32px;
    padding: 0 15px;
    font-size: 14px;
    border-radius: 4px;
    color: rgba(0, 0, 0, 0.65);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
    border: 1px solid transparent;
    cursor: pointer;
    // border: none;
    font-weight: 400;
    white-space: nowrap;
    text-align: center;
    user-select: none;
    // touch-action: manipulation;
    outline: 0;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
      0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
     
    transition: 0.25s;

  

    
  }
</style>
